<style>
    #classify-card {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #classify-card .card {
        width: 49%;
        cursor: pointer;
    }
    #classify-card .card img {
        display: block;
        width: 100%;
    }
    #classify-card .card p {
        font-size: 16px;
        font-weight: bolder;
    }
    #classify-card .card p span {
        color: #f00581;
        font-size: 18px;
    }
</style>
<section id="classify-card" class="bancen">

</section>
<script>
    $(function () {
        axios.get('./static/api/hot/hotList.json').then(res => {
            console.warn('分类列表数据：', res.data.data)
            renderClassifyCard(res.data.data)
        })

        function renderClassifyCard (data) {
            var res = data.map(item => `<div class="card" data-id="${item.id}"><img src="${item.src}"><p><span>${item.reduce}</span>${item.reduceStr}${item.title}</p></div>`).join('')
            $('#classify-card').append(res)

            bindEvent()
        }

        //绑定事件
        function bindEvent () {
            $('#classify-card').on('click', '.card', function (e) {
                var id = $(this).attr('data-id')
                console.log(id)
                window.open('./shoplist.html#id=' + id)
            })
        }
    })
</script>